<template>
    <div class="view-wrapper">
      <div class="head">
        <el-form :model="queryParams" ref="queryForm" :inline="true">
          <el-form-item label="" prop="">
            <el-input v-model="queryParams.query" placeholder="服务单id/客户名称/服务项目" clearable style="width: 230px;" />
          </el-form-item>
          <el-form-item label="客户级别：" prop="">
            <el-select v-model="queryParams.level" placeholder="请选择" style="width: 140px;" filterable>
              <el-option v-for="item in levelList" :key="item.id" :label="item.value" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="责任人：" prop="">
            <el-select v-model="queryParams.responsiblePerson" placeholder="请选择" filterable style="width: 160px;">
              <el-option v-for="item in responsiblePersonList" :key="item.id" :label="item.value" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="状态：" prop="">
            <el-select v-model="queryParams.status" placeholder="请选择" style="width: 140px;" filterable>
              <el-option v-for="item in statusList" :key="item.id" :label="item.value" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="" prop="">
            <el-select v-model="queryParams.type" placeholder="请选择" style="width: 140px;margin-left: 20px;" filterable>
              <el-option v-for="item in typeList" :key="item.id" :label="item.value" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="">
              <el-date-picker clearable v-model="date" type="datetimerange" format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm"
                range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="changeTime"
                placeholder="请选择">
              </el-date-picker>
            </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
            <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="listBox">
        <div class="listBox_head">
          <export-excel-button title="待办列表" action="/client/service/item/link/record/v1/list/export" :params="queryParams" v-hasAuth="'sys:client:service:item:link:record:export'"/>
        </div>
        <el-tabs v-model="queryParams.queryType" @tab-click="handleClick">
            <el-tab-pane label="全部待办" name="1"></el-tab-pane>
            <el-tab-pane label="我的待办" name="2"></el-tab-pane>
        </el-tabs>
        <el-table v-loading="loading" ref="multipleTable" :data="tabList" stripe border tooltip-effect="dark" style="width: 100%">
          <el-table-column label="序号" align="center" type="index" width="64px" />
          <el-table-column label="服务单id" align="center" prop="id"></el-table-column>
          <el-table-column label="客户名称" align="center" prop="clientName" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column label="客户级别" align="center" prop="clientLevel" ></el-table-column>
          <el-table-column label="服务项目" align="center" prop="itemName" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column label="服务环节" align="center" prop="itemLinkName" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column label="上一环节负责人" align="center" prop="lastResponsiblePerson" width="130"></el-table-column>
          <el-table-column label="上个环节提交时间" align="center" prop="lastSubmitTime" width="180"></el-table-column>
          <el-table-column label="当前负责人" align="center" prop="responsiblePerson"></el-table-column>
          <el-table-column label="已耗时" align="center" prop="usedTime"></el-table-column>
          <el-table-column label="创建时间" align="center" prop="createTime" width="100"></el-table-column>
          <el-table-column label="状态" align="center" prop="statusDict"></el-table-column>
          <el-table-column label="操作" align="center" fixed="right">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="lookClick(scope.row)">去处理</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
          @pagination="getList"></pagination>
      </div>
      <!-- 去处理弹窗 -->
      <WatchDialog v-if="watchVisible" :id="dialogId" :visible.sync="watchVisible" @success="_handleSuccess"></WatchDialog>
    </div>
  </template>
  
  <script>
    import {
      responsibleSelect,serviceToDoLs,
    } from "@/api/customer/serviceManage";
    import ExportExcelButton from "@/components/ExportExcelButton/index";
    import WatchDialog from "../serviceList/components/watchDialog";
    export default {
      name: "",
      components: {
        WatchDialog,
        ExportExcelButton
      },
      data() {
        return {
          dialogId: '',
          dialogVisible: false,
          watchVisible: false,
          // 遮罩层
          loading: false,
          // 导出遮罩层
          // 总条数
          total: 0,
          //表格数据
          tabList: [],
          pathType: 'add',
          date: [],
          // 查询参数
          queryParams: {
            pageNum: 1,
            pageSize: 10,
            beginTime:'',//创建开始时间
            endTime:'',//创建结束时间
            level:'',//客户级别
            query:'',//查询关键字
            responsiblePerson:'',//当前责任人ID
            status:'1',//状态
            type:'1',//查询时间类型 1 创建时间 2 提交时间
            queryType:'1',//1 全部 2 我的待办
          },
          typeList:[
            {id:'1',value:'创建时间'},{id:'2',value:'提交时间'}
          ],
          levelList: [], //客户级别字典
          statusList: [], //状态字典
          responsiblePersonList: [],
          ids: '',
          activeName:"1",
        };
      },
      computed: {
        ExportParams() {
        const params = {
          ...this.queryParams,
        };
        return params;
      },
      },
      created() {
        this.getDict()
        this.getresponsiblePersonList() 
        this.getList();
      },
      methods: {
         //获取状态字典
         getDict() {
          var dictType = "bee_client_level,bee_client_service_item_link_record_status";
          this.$getSelectList(dictType)
            .then((res) => {
              var arr = [{
                id: "",
                value: "全部",
              },];
              this.levelList = arr.concat(res.result[0].dictList);
              this.statusList = arr.concat(res.result[1].dictList);
            })
        },
  
        //客户负责人下拉
        getresponsiblePersonList() {
          responsibleSelect().then((res) => {
              var arr = [{
                id: "",
                value: "全部",
              },];
              this.responsiblePersonList = arr.concat(res.result);
          })
        },
        //状态切换
        handleClick(){
          this.queryParams.pageNum = 1
          this.getList();
        },
        
        /** 查询列表 */
        getList() {
          this.loading = true;
          serviceToDoLs(this.queryParams).then(response => {
            response.result.records.forEach(item => {
              for (var key in item) {
                if (item[key] === '') {
                  item[key] = "-";
                }
              }
            });
            this.tabList = response.result.records;
            this.total = response.result.total;
            this.loading = false;
          });
        },
        //处理时间
        changeTime(e){
          this.queryParams.beginTime = e[0]
          this.queryParams.endTime = e[1]
        },
        // 表单重置
        reset() {
          this.date = []
          this.queryParams = {
            pageNum: 1,
            pageSize: 10,
            beginTime:'',//创建开始时间
            endTime:'',//创建结束时间
            level:'',//客户级别
            query:'',//查询关键字
            responsiblePerson:'',//当前责任人ID
            status:'1',//状态
            type:'1',//查询时间类型 1 创建时间 2 提交时间
            queryType:'1',//1 全部 2 我的待办
          };
          this.resetForm("queryParams");
          this.handleQuery()
        },
        //查看
        lookClick(row){
          this.watchVisible = true;
          this.dialogId = row.id
        },
        /** 搜索按钮操作 */
        handleQuery() {
          this.queryParams.pageNum = 1;
          this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
          // this.resetForm("queryForm");
          this.reset();
        },
        _handleSuccess(e) {
          //成功回调
          this.resetQuery()
          this.getList()
        },
        
      }
    };
  
  </script>
  <style scoped>
    .head {
      box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
      background-color: #fff;
      border-radius: 8px;
      padding: 20px 20px 0;
    }
  
    .listBox {
      box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
      background-color: #fff;
      border-radius: 8px;
      padding: 20px 20px;
      margin-top: 10px;
      position: relative;
    }
  
    .listBox_head {
      /* width: 100%; */
      position: absolute;
      right: 20px;
      top: 12px;
      z-index: 99;
      /* display: flex;
      align-items: center;
      justify-content: space-between; */
    }
  
    .img_box {
      width: 100px;
      height: 80px;
      border-radius: 4px;
    }
  
  </style>
    